<script setup lang="ts">
import { onMounted, ref } from 'vue';
import YHeader from '@/components/YHeader.vue';
import { useUserStore } from '@/store/user';
import { UserEnvironment } from '@/api/code/type';
import { router } from '@/router';
import { getUserEnvironmentList } from '@/api/code';
import { startContainer, stopContainer } from '@/api/docker';
import { showToast } from 'vant';
import { Result } from '@/utils/request';

const dataList = ref([] as UserEnvironment[])
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {

}

onMounted(() => {
    init();
})

const init = () => {
    const userStore = useUserStore();
    const userId = userStore.getId;
    getUserEnvironmentList(userId).then((res) => {
        dataList.value = res.data as UserEnvironment[];
    })
    finished.value = true;
    loading.value = true;
}

const toCode = (item: UserEnvironment) => {
    if (item.status != 'Running') {
        showToast("请先启动编程环境！");
    } else {
        router.push({
            name: 'OnlineCode',
            query: {
                'id': item.id,
            }
        })
    }
}

const toCreate = () => {
    router.push({
        name: 'OnlineCodeCreate'
    })
}

const start = (item: UserEnvironment, event: Event) => {
    event.stopPropagation();
    startContainer(item.instance.id, item.containerId).then((res) => {
        item.status = 'Running';
        const {msg} = res as Result;
        showToast(msg);
    })
}

const stop = (item: UserEnvironment, event: Event) => {
    event.stopPropagation();
    stopContainer(item.instance.id, item.containerId).then(() => {
        item.status = 'Exited';
    })
}

</script>

<template>
    <div class="container">
        <YHeader></YHeader>
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <div v-for="(item, index) in dataList" :key="index">
                <div class="row" @click="toCode(item)">
                    <div class="column left">
                        <div class="left-row">
                            <p class="text">环境名：</p>
                            <p>{{ item.name }}</p>
                        </div>
                        <div class="left-row">
                            <p class="text">环境类型：</p>
                            <p>{{ item.environment.name }}</p>
                        </div>
                    </div>
                    <div class="center">
                        <van-button v-if="item.status === 'Running'" type="success" @click="stop(item, $event)">停止</van-button>
                        <van-button v-else type="warning" @click="start(item, $event)">运行</van-button>
                    </div>
                </div>
            </div>
        </van-list>
        <van-button class="button" type="primary" @click="toCreate">创建新实例</van-button>
    </div>
</template>

<style lang="scss" scoped>
.text {
    font-size: 13px;
    color: #4e4c4c9c;
}
.button {
    width: 94%;
    margin-left: 3%;
    margin-right: 3%;
}
.column {
    display: flex;
    flex-direction: column;
    .left-row {
        display: flex;
        align-items: center;
    }
}
.row {
    display: flex;
    align-items: center;
    width: 94%;
    background-color: white;
    border-radius: 15px;
    margin: 3%;
    .left {
        padding-left: 15%;
        width: 45%;
        align-items: left;
    }
    .center {
        width: 40%;
        display: flex;
        justify-content: center;
    }
}
</style>